'use client';
import React, { useState, useEffect, useMemo } from 'react';
import { 
  Container, Grid, Card, CardContent, Typography, Avatar, 
  Button, List, ListItem, ListItemText, ListItemAvatar, 
  Chip, Box, Paper, IconButton, LinearProgress, Divider, CircularProgress, Switch, FormControlLabel
} from '@mui/material';
import { 
  Person as PersonIcon,
  AccessTime as AccessTimeIcon,
  Event as EventIcon,
  AttachMoney as AttachMoneyIcon,
  Book as BookIcon,
  BarChart as BarChartIcon,
  Group as GroupIcon,
  Info as InfoIcon,
  ChevronLeft as ChevronLeftIcon,
  ChevronRight as ChevronRightIcon,
  School as SchoolIcon,
  Assignment as AssignmentIcon,
  Timeline as TimelineIcon,
  WorkHistory as WorkHistoryIcon
} from '@mui/icons-material';
import { getUserInfo } from '@/lib/user';
import AppLayout from '@/components/Layout';
import dayjs, { Dayjs } from 'dayjs';
import 'dayjs/locale/zh-cn';
import { useRouter } from 'next/navigation';
import { MdPeople } from 'react-icons/md';
import { fetchTodoList, TodoItem, updateTodoStatus, updateTodoItem, UpdateTodoParams, createTodoItem } from '@/lib/matter';
import { message, Modal, Form, Input, DatePicker, Radio } from 'antd';
import { getAnnouncement } from '@/lib/announcement';
import { getCurrentEmployeeAttendanceStatistics, AttendanceStatistics } from '@/lib/statistic';

dayjs.locale('zh-cn');

const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

interface UserInfo {
  employeeId: string;
  username: string;
  gender: number;
  age: number;
  birthday: string;
  phoneNumber: string;
  email: string;
  department: number;
  deptName: string;
  position: string;
  deptType: number;
  role: string;
  roleId: number;
  status: number;
}

const STATUS_MAP: Record<number, string> = {
  0: '试用期',
  1: '正式员工',
  2: '离职'
};

const DEPT_TYPE_MAP: Record<number, string> = {
  1: '职能部门',
  2: '二级学院',
  3: '其他部门'
};

const DashboardPage = () => {
  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
  const [currentYear, setCurrentYear] = useState(dayjs().year());
  const [currentMonth, setCurrentMonth] = useState(dayjs().month());
  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
  const [todoItems, setTodoItems] = useState<TodoItem[]>([]);
  const [todoLoading, setTodoLoading] = useState(true);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [editingTodo, setEditingTodo] = useState<TodoItem | null>(null);
  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [isAddingForOther, setIsAddingForOther] = useState(false);
  const [form] = Form.useForm();
  const [createForm] = Form.useForm();
  const router = useRouter();
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize] = useState(5); // 每页显示5条
  const [announcements, setAnnouncements] = useState<any[]>([]);
  const [workStats, setWorkStats] = useState([
    { title: '本月考勤', value: 0, total: 0, color: '#1890ff' },
    { title: '迟到早退', value: 0, total: 0, color: '#52c41a' },
    { title: '加班时长', value: 0, total: 0, color: '#722ed1' }
  ]);
  const [recentActivities, setRecentActivities] = useState<any[]>([]);
  const [teachingTasks, setTeachingTasks] = useState<any[]>([]);
  const [attendanceStats, setAttendanceStats] = useState<AttendanceStatistics | null>(null);
  const [attendanceLoading, setAttendanceLoading] = useState(true);
  const [attendanceRecords, setAttendanceRecords] = useState<any[]>([]);

  useEffect(() => {
    const fetchUserInfo = async () => {
      try {
        const response = await getUserInfo();
        console.log('用户信息响应:', response);
        if (response && response.data && response.data.code === 1) {
          setUserInfo(response.data.data);
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    };

    fetchUserInfo();
  }, []);

  // 获取待办事项列表
  const fetchTodos = async () => {
    setTodoLoading(true);
    try {
      const response = await fetchTodoList();
      console.log('待办事项列表响应:', response);
      if (response && response.data && response.data.code === 1) {
        // 假设后端返回的数据中包含 creatorId 字段
        // 如果没有，我们可以假设所有待办事项都是当前用户创建的
        const todoData = response.data.data || [];
        const todosWithCreator = todoData.map((todo: TodoItem) => ({
          ...todo,
          creatorId: todo.creatorId || userInfo?.employeeId // 如果没有 creatorId，默认为当前用户
        }));
        
        // 按照 id 降序排序，确保最新添加的待办事项在上面
        const sortedTodos = [...todosWithCreator].sort((a, b) => b.id - a.id);
        
        setTodoItems(sortedTodos);
      }
    } catch (error) {
      console.error('获取待办事项失败:', error);
    } finally {
      setTodoLoading(false);
    }
  };

  useEffect(() => {
    fetchTodos();
  }, []);

  const handleCompleteTodo = async (id: number) => {
    try {
      const response = await updateTodoStatus(id);
      
      // 打印响应内容
      console.log('完成待办事项响应内容:', response);
      
      if (response && response.data && response.data.code === 1) {
        message.success('待办事项已完成');
        // 更新本地待办事项列表，将状态改为已完成(1)而不是删除
        setTodoItems(prev => prev.map(item => 
          item.id === id ? { ...item, status: 1 } : item
        ));
      } else {
        message.error(response?.data?.msg || '操作失败');
      }
    } catch (error) {
      console.error('更新待办事项状态失败:', error);
      message.error('操作失败，请稍后重试');
    }
  };

  // 打开编辑待办事项模态框
  const handleEditTodo = (todo: TodoItem) => {
    setEditingTodo(todo);
    form.setFieldsValue({
      matterContent: todo.matterContent,
      dateRange: [dayjs(todo.startTime), dayjs(todo.endTime)]
    });
    setEditModalVisible(true);
  };

  // 提交编辑待办事项
  const handleEditSubmit = async () => {
    try {
      const values = await form.validateFields();
      const { matterContent, dateRange } = values;
      
      if (!editingTodo) {
        message.error('编辑数据异常，请重试');
        return;
      }

      const params: UpdateTodoParams = {
        id: editingTodo.id,
        matterContent,
        startTime: dateRange[0].format('YYYY-MM-DDTHH:mm:ss'),
        endTime: dateRange[1].format('YYYY-MM-DDTHH:mm:ss')
      };

      // 打印编辑提交的内容
      console.log('编辑待办事项提交的内容:', params);

      const response = await updateTodoItem(params);
      
      // 打印响应内容
      console.log('编辑待办事项响应内容:', response);
      
      if (response && response.data && response.data.code === 1) {
        message.success('待办事项更新成功');
        setEditModalVisible(false);
        // 更新本地待办事项列表
        setTodoItems(prev => prev.map(item => 
          item.id === editingTodo.id 
            ? { 
                ...item, 
                matterContent, 
                startTime: dateRange[0].format('YYYY-MM-DDTHH:mm:ss'),
                endTime: dateRange[1].format('YYYY-MM-DDTHH:mm:ss')
              } 
            : item
        ));
      } else {
        message.error(response?.data?.msg || '更新失败');
      }
    } catch (error) {
      if (error instanceof Error) {
        console.error('更新待办事项失败:', error);
      }
      message.error('更新失败，请检查输入并重试');
    }
  };

  // 打开创建待办事项模态框
  const handleOpenCreateModal = () => {
    // 先设置模态框为可见
    setCreateModalVisible(true);
    
    // 完全重置表单，包括所有字段
    createForm.resetFields();
    
    // 重置状态
    setIsAddingForOther(false);
    
    // 只设置默认的添加对象类型，不设置日期
    setTimeout(() => {
      createForm.setFieldsValue({
        assignType: 'self'
      });
    }, 100);
  };

  // 关闭创建待办事项模态框
  const handleCloseCreateModal = () => {
    setCreateModalVisible(false);
    // 延迟重置表单，确保模态框关闭动画完成后再重置
    setTimeout(() => {
      createForm.resetFields();
    }, 300);
  };

  // 提交创建待办事项
  const handleCreateSubmit = async () => {
    try {
      const values = await createForm.validateFields();
      const { matterContent, dateRange, assignType, employeeId } = values;
      
      if (!userInfo?.employeeId) {
        message.error('获取用户信息失败，请刷新页面重试');
        return;
      }

      // 根据选择决定待办事项分配给谁
      const targetEmployeeId = assignType === 'self' ? userInfo.employeeId : employeeId;
      
      // 如果是给其他员工添加，但没有输入员工号
      if (assignType === 'other' && !employeeId) {
        message.error('请输入员工号');
        return;
      }

      // 修改日期格式为 ISO 格式，去掉空格和秒
      const params = {
        employeeId: targetEmployeeId,
        matterContent,
        startTime: dateRange[0].format('YYYY-MM-DDTHH:mm:ss'),
        endTime: dateRange[1].format('YYYY-MM-DDTHH:mm:ss')
      };

      // 打印提交的内容
      console.log('创建待办事项提交的内容:', params);

      const response = await createTodoItem(params);
      
      // 打印响应内容
      console.log('创建待办事项响应内容:', response);
      
      if (response && response.data && response.data.code === 1) {
        message.success('待办事项创建成功');
        // 使用关闭模态框的函数，它会处理表单重置
        handleCloseCreateModal();
        // 重新获取待办事项列表
        fetchTodos();
      } else {
        message.error(response?.data?.msg || '创建失败');
      }
    } catch (error) {
      if (error instanceof Error) {
        console.error('创建待办事项失败:', error);
      }
      message.error('创建失败，请检查输入并重试');
    }
  };

  // 格式化日期显示
  const formatDate = (dateString: string) => {
    return dayjs(dateString).format('YYYY-MM-DD');
  };

  // 判断待办事项是否已过期
  const isOverdue = (endTime: string) => {
    return dayjs().isAfter(dayjs(endTime));
  };

  const calendarDays = useMemo(() => {
    const days = [];
    const firstDay = dayjs(new Date(currentYear, currentMonth, 1));
    const lastDay = firstDay.endOf('month');

    for (let i = firstDay.day(); i > 0; i--) {
      days.push(firstDay.subtract(i, 'day'));
    }

    for (let i = 1; i <= lastDay.date(); i++) {
      days.push(dayjs(new Date(currentYear, currentMonth, i)));
    }

    const remainingDays = 42 - days.length;
    for (let i = 1; i <= remainingDays; i++) {
      days.push(lastDay.add(i, 'day'));
    }

    return days;
  }, [currentYear, currentMonth]);

  const prevMonth = () => {
    if (currentMonth === 0) {
      setCurrentMonth(11);
      setCurrentYear(currentYear - 1);
    } else {
      setCurrentMonth(currentMonth - 1);
    }
  };

  const nextMonth = () => {
    if (currentMonth === 11) {
      setCurrentMonth(0);
      setCurrentYear(currentYear + 1);
    } else {
      setCurrentMonth(currentMonth + 1);
    }
  };

  // 日期相关函数
  const isToday = (date: Dayjs) => date.isSame(dayjs(), 'day');
  const isSelected = (date: Dayjs) => selectedDate && date.isSame(selectedDate, 'day');
  const isCurrentMonth = (date: Dayjs) => date.month() === currentMonth;

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'high': return '#f5222d';
      case 'medium': return '#faad14';
      case 'low': return '#52c41a';
      default: return '#1890ff';
    }
  };

  const calendarStyles = {
    calendarContainer: {
      width: '100%',
      backgroundColor: '#fff',
      borderRadius: '8px',
      overflow: 'hidden',
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
    },
    calendarHeader: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '12px',
      background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
      color: 'white',
    },
    monthTitle: {
      fontSize: '1.1rem',
      fontWeight: 500,
      color: 'white',
    },
    weekGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(7, 1fr)',
      gap: '1px',
      backgroundColor: '#f0f0f0',
      padding: '8px',
    },
    weekday: {
      textAlign: 'center',
      padding: '8px',
      fontWeight: 500,
      color: '#1890ff',
    },
    daysGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(7, 1fr)',
      gap: '1px',
      backgroundColor: '#f0f0f0',
      padding: '8px',
    },
    dayCell: {
      aspectRatio: '1',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      cursor: 'pointer',
      backgroundColor: '#fff',
      borderRadius: '4px',
      transition: 'all 0.2s',
      '&:hover': {
        backgroundColor: '#e6f7ff',
        transform: 'scale(1.05)',
      },
    },
    today: {
      background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
      color: '#fff',
      fontWeight: 'bold',
      boxShadow: '0 2px 4px rgba(24,144,255,0.2)',
      '&:hover': {
        background: 'linear-gradient(135deg, #40a9ff 0%, #1890ff 100%)',
      },
    },
    selected: {
      backgroundColor: '#e6f7ff',
      border: '2px solid #1890ff',
      fontWeight: 'bold',
    },
    otherMonth: {
      color: '#ccc',
      backgroundColor: '#fafafa',
    },
  };

  // 获取当前页的待办事项
  const getCurrentPageTodos = () => {
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    return todoItems.slice(startIndex, endIndex);
  };

  // 获取要显示的页码范围
  const getPageRange = () => {
    const totalPages = Math.ceil(todoItems.length / pageSize);
    
    // 如果总页数小于等于5，显示所有页码
    if (totalPages <= 5) {
      return Array.from({ length: totalPages }, (_, i) => i + 1);
    }
    
    // 否则，显示当前页附近的5个页码
    let startPage = Math.max(currentPage - 2, 1);
    let endPage = startPage + 4;
    
    // 如果结束页超出总页数，调整起始页和结束页
    if (endPage > totalPages) {
      endPage = totalPages;
      startPage = Math.max(endPage - 4, 1);
    }
    
    return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
  };

  // 处理页码变化
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  // 处理上一页
  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  // 处理下一页
  const handleNextPage = () => {
    const totalPages = Math.ceil(todoItems.length / pageSize);
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  // 获取部门公告
  useEffect(() => {
    const fetchAnnouncements = async () => {
      if (!userInfo?.department || !userInfo?.deptType) return;
      
      try {
        // 使用正确的参数格式调用getAnnouncement函数
        const response = await getAnnouncement({
          deptId: userInfo.department,
          deptType: userInfo.deptType
        });
        
        console.log('部门公告API响应:', response);
        
        if (response && response.code === 1) {
          setAnnouncements(response.data || []);
        }
        
        console.log('当前用户部门ID:', userInfo.department);
        console.log('当前用户部门类型:', userInfo.deptType);
        console.log('获取到的公告:', response?.data);
      } catch (error) {
        console.error('获取部门公告失败:', error);
        message.error('获取部门公告失败');
      }
    };

    if (userInfo) {
      fetchAnnouncements();
    }
  }, [userInfo]);

  // 获取当前员工的考勤统计和记录
  useEffect(() => {
    const fetchAttendanceData = async () => {
      if (!userInfo?.employeeId) return;
      
      setAttendanceLoading(true);
      
      try {
        // 获取当前月份，格式为YYYY-MM
        const currentMonth = dayjs().format('YYYY-MM');
        const params = {
          employeeId: userInfo.employeeId,
          yearMonth: currentMonth
        };
        
        // 打印请求参数
        console.log('考勤统计请求参数:', {
          url: '/attendance/statistics',
          method: 'GET',
          params: params
        });
        
        const response = await getCurrentEmployeeAttendanceStatistics(
          userInfo.employeeId,
          currentMonth
        );
        
        // 打印完整的响应数据
        console.log('考勤统计完整响应:', response);
        
        if (response && response.code === 1) {
          if (response.data && response.data.row && response.data.row.length > 0) {
            // 获取第一条统计数据
            const statsData = response.data.row[0];
            console.log('处理后的考勤统计数据:', statsData);
            
            setAttendanceStats(statsData);
            
            // 更新工作统计数据
            const workStatsData = [
              { 
                title: '本月考勤', 
                value: statsData.attendanceDays, 
                total: statsData.attendanceDays + statsData.absentDays + statsData.leaveDays, 
                color: '#1890ff' 
              },
              { 
                title: '迟到早退', 
                value: statsData.lateCount + statsData.leaveEarlyCount, 
                total: statsData.attendanceDays, // 使用考勤天数作为总天数
                color: '#52c41a' 
              },
              { 
                title: '加班时长', 
                value: parseInt(statsData.overTime.split(':')[0]) || 0,
                total: parseInt(statsData.workingTime.split(':')[0]) || 0, // 使用工作时长作为总时长
                color: '#722ed1' 
              }
            ];
            
            console.log('更新的工作统计数据:', workStatsData);
            setWorkStats(workStatsData);
          } else {
            console.log('响应成功但没有数据');
            message.info('当前月份暂无考勤数据');
            // 重置工作统计数据
            setWorkStats([
              { title: '本月考勤', value: 0, total: 0, color: '#1890ff' },
              { title: '迟到早退', value: 0, total: 0, color: '#52c41a' },
              { title: '加班时长', value: 0, total: 0, color: '#722ed1' }
            ]);
          }
        } else {
          console.error('获取考勤数据失败:', response);
          message.error(response?.msg || '获取考勤数据失败');
        }
      } catch (error) {
        console.error('获取考勤数据失败:', error);
        message.error('获取考勤数据失败');
      } finally {
        setAttendanceLoading(false);
      }
    };

    if (userInfo) {
      fetchAttendanceData();
    }
  }, [userInfo]);

  return (
    <AppLayout>
      <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
        {/* 大卡片包裹所有内容 */}
        <Card sx={{ 
          borderRadius: 2, 
          boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
          overflow: 'hidden'
        }}>
          <CardContent sx={{ p: 3 }}>
            <Typography variant="h4" gutterBottom sx={{ 
              mb: 3, 
              fontWeight: 600,
              color: '#1890ff',
              borderBottom: '1px solid #f0f0f0',
              paddingBottom: 2
            }}>
              教师工作台
            </Typography>
            
            <Grid container spacing={3}>
              {/* 欢迎语 */}
              <Grid item xs={12}>
                <Box sx={{ 
                  padding: '16px 24px', 
                  borderRadius: '12px',
                  background: 'linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%)',
                  boxShadow: '0 4px 12px rgba(24,144,255,0.1)',
                  marginBottom: '16px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between'
                }}>
                  <Box>
                    <Typography variant="h4" sx={{ 
                      fontWeight: 'bold', 
                      color: '#1890ff',
                      marginBottom: '4px'
                    }}>
                      你好，{userInfo?.username || '老师'}
                    </Typography>
                    <Typography variant="body1" sx={{ color: '#666' }}>
                      欢迎使用系统，祝您工作愉快！
                    </Typography>
                  </Box>
                  <Avatar 
                    sx={{ 
                      width: 64, 
                      height: 64, 
                      bgcolor: '#1890ff',
                      boxShadow: '0 4px 8px rgba(24,144,255,0.3)'
                    }}
                  >
                    <PersonIcon sx={{ fontSize: 36, color: 'white' }} />
                  </Avatar>
                </Box>
              </Grid>
              
              {/* 左侧栏 */}
              <Grid item xs={12} md={9} lg={9}>
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  {/* 顶部卡片行 */}
                  <Box sx={{ display: 'flex', gap: 2, flexWrap: { xs: 'wrap', md: 'nowrap' } }}>
                    {/* 工作统计卡片 */}
                    <Card sx={{ 
                      borderRadius: 2, 
                      flexGrow: 1,
                      background: 'linear-gradient(to bottom, #f0f7ff, #e6f7ff)',
                      boxShadow: '0 8px 16px rgba(24,144,255,0.15)',
                      border: '1px solid rgba(24,144,255,0.2)'
                    }}>
                      <CardContent>
                        <Typography variant="h6" gutterBottom sx={{ 
                          display: 'flex', 
                          alignItems: 'center',
                          color: '#1890ff'
                        }}>
                          <TimelineIcon sx={{ mr: 1, color: '#1890ff' }} />
                          工作统计
                        </Typography>
                        
                        {attendanceLoading ? (
                          <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>
                            <CircularProgress size={24} sx={{ color: '#1890ff' }} />
                          </Box>
                        ) : (
                          <Grid container spacing={2}>
                            {workStats.map((stat, index) => (
                              <Grid item xs={12} sm={4} key={index}>
                                <Box sx={{ 
                                  p: 2, 
                                  borderRadius: '8px', 
                                  border: '1px solid rgba(0,0,0,0.1)',
                                  background: 'white'
                                }}>
                                  <Typography variant="subtitle1" sx={{ fontWeight: 'bold', color: stat.color }}>
                                    {stat.title}
                                  </Typography>
                                  <Box sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
                                    <Typography variant="h4" sx={{ fontWeight: 'bold', color: stat.color }}>
                                      {stat.value}
                                    </Typography>
                                    <Typography variant="body2" sx={{ ml: 1, color: '#666' }}>
                                      / {stat.total}
                                    </Typography>
                                  </Box>
                                  <LinearProgress 
                                    variant="determinate" 
                                    value={Math.min((stat.value / stat.total) * 100, 100)} 
                                    sx={{ 
                                      mt: 1, 
                                      height: 8, 
                                      borderRadius: 4,
                                      backgroundColor: `${stat.color}20`,
                                      '& .MuiLinearProgress-bar': {
                                        backgroundColor: stat.color
                                      }
                                    }} 
                                  />
                                </Box>
                              </Grid>
                            ))}
                          </Grid>
                        )}
                        
                        {attendanceStats && (
                          <Box sx={{ mt: 2, p: 2, borderRadius: '8px', border: '1px solid rgba(0,0,0,0.1)', background: 'white' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 1 }}>
                              {attendanceStats.yearMonth} 考勤详情
                            </Typography>
                            <Grid container spacing={2}>
                              <Grid item xs={6} sm={3}>
                                <Typography variant="body2" color="textSecondary">工作时长</Typography>
                                <Typography variant="body1" sx={{ fontWeight: 'medium' }}>{attendanceStats.workingTime}</Typography>
                              </Grid>
                              <Grid item xs={6} sm={3}>
                                <Typography variant="body2" color="textSecondary">加班时长</Typography>
                                <Typography variant="body1" sx={{ fontWeight: 'medium' }}>{attendanceStats.overTime}</Typography>
                              </Grid>
                              <Grid item xs={6} sm={3}>
                                <Typography variant="body2" color="textSecondary">请假天数</Typography>
                                <Typography variant="body1" sx={{ fontWeight: 'medium' }}>{attendanceStats.leaveDays} 天</Typography>
                              </Grid>
                              <Grid item xs={6} sm={3}>
                                <Typography variant="body2" color="textSecondary">缺勤天数</Typography>
                                <Typography variant="body1" sx={{ fontWeight: 'medium' }}>{attendanceStats.absentDays} 天</Typography>
                              </Grid>
                            </Grid>
                            <Grid container spacing={2} sx={{ mt: 1 }}>
                              <Grid item xs={6} sm={3}>
                                <Typography variant="body2" color="textSecondary">迟到次数</Typography>
                                <Typography variant="body1" sx={{ fontWeight: 'medium' }}>{attendanceStats.lateCount} 次</Typography>
                              </Grid>
                              <Grid item xs={6} sm={3}>
                                <Typography variant="body2" color="textSecondary">早退次数</Typography>
                                <Typography variant="body1" sx={{ fontWeight: 'medium' }}>{attendanceStats.leaveEarlyCount} 次</Typography>
                              </Grid>
                              <Grid item xs={6} sm={3}>
                                <Typography variant="body2" color="textSecondary">考勤天数</Typography>
                                <Typography variant="body1" sx={{ fontWeight: 'medium' }}>{attendanceStats.attendanceDays} 天</Typography>
                              </Grid>
                              <Grid item xs={6} sm={3}>
                                <Typography variant="body2" color="textSecondary">员工工号</Typography>
                                <Typography variant="body1" sx={{ fontWeight: 'medium' }}>{attendanceStats.employeeId}</Typography>
                              </Grid>
                            </Grid>
                          </Box>
                        )}
                      </CardContent>
                    </Card>

                    {/* 人才招聘卡片 - 占据原快速操作位置 */}
                    <Card 
                      className="recruitment-card"
                      sx={{ 
                        borderRadius: 2,
                        flexGrow: 1,
                        width: '50%',
                        background: 'linear-gradient(135deg, #2B32B2 0%, #1488CC 100%)',
                        boxShadow: '0 8px 32px rgba(31, 38, 135, 0.37)',
                        backdropFilter: 'blur(4px)',
                        border: '1px solid rgba(255, 255, 255, 0.18)',
                        cursor: 'pointer',
                        transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
                        '&:hover': {
                          transform: 'translateY(-8px) scale(1.02)',
                          boxShadow: '0 15px 35px rgba(31, 38, 135, 0.5)'
                        }
                      }}
                      onClick={() => {
                        // 添加打点记录
                        console.log('人才招聘卡片点击', {
                          timestamp: new Date().toISOString(),
                          userId: userInfo?.employeeId,
                          action: 'click',
                          component: 'recruitment_card'
                        });
                        router.push('/public/recruitment');
                      }}
                    >
                      <CardContent className="card-content" sx={{ 
                        position: 'relative',
                        overflow: 'hidden',
                        padding: '32px',
                        display: 'flex',
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        '&::before': {
                          content: '""',
                          position: 'absolute',
                          top: 0,
                          left: 0,
                          right: 0,
                          bottom: 0,
                          background: 'radial-gradient(circle at 30% 107%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 70%)',
                          pointerEvents: 'none'
                        }
                      }}>
                        <Box className="card-text">
                          <Typography 
                            variant="h4" 
                            className="card-title" 
                            sx={{ 
                              fontFamily: "'Russo One', sans-serif",
                              fontSize: { xs: '2em', md: '2.5em', lg: '3em' },
                              fontWeight: 900,
                              background: 'linear-gradient(to right, #FFFFFF 0%, #89CFF0 100%)',
                              WebkitBackgroundClip: 'text',
                              WebkitTextFillColor: 'transparent',
                              textShadow: '2px 2px 4px rgba(0,0,0,0.3)',
                              letterSpacing: '2px',
                              marginBottom: '16px',
                              position: 'relative',
                              '&::after': {
                                content: '""',
                                position: 'absolute',
                                bottom: '-8px',
                                left: '0',
                                width: '60px',
                                height: '4px',
                                background: 'linear-gradient(to right, #89CFF0, transparent)',
                                borderRadius: '2px'
                              }
                            }}
                          >
                            人才招聘
                          </Typography>
                          <Typography 
                            variant="body1" 
                            sx={{ 
                              opacity: 0.9, 
                              marginBottom: '24px',
                              color: '#E0E7FF',
                              fontFamily: "'Noto Sans SC', sans-serif",
                              fontSize: '1.1em',
                              textShadow: '0 2px 4px rgba(0,0,0,0.2)'
                            }}
                          >
                            查看最新招聘信息和职位空缺
                          </Typography>
                          <Button 
                            variant="contained"
                            className="view-button"
                            endIcon={<MdPeople style={{ fontSize: 24 }} />}
                            onClick={(e) => {
                              e.stopPropagation();
                              // 添加按钮点击打点
                              console.log('查看详情按钮点击', {
                                timestamp: new Date().toISOString(),
                                userId: userInfo?.employeeId,
                                action: 'click',
                                component: 'recruitment_view_button'
                              });
                              router.push('/public/recruitment');
                            }}
                            sx={{
                              background: 'rgba(255, 255, 255, 0.1)',
                              backdropFilter: 'blur(10px)',
                              border: '1px solid rgba(255, 255, 255, 0.2)',
                              color: 'white',
                              padding: '12px 28px',
                              borderRadius: '50px',
                              fontSize: '1.1em',
                              fontWeight: 600,
                              fontFamily: "'Noto Sans SC', sans-serif",
                              textTransform: 'none',
                              position: 'relative',
                              overflow: 'hidden',
                              transition: 'all 0.3s ease',
                              '&::before': {
                                content: '""',
                                position: 'absolute',
                                top: '50%',
                                left: '50%',
                                width: '300px',
                                height: '300px',
                                backgroundColor: 'rgba(255, 255, 255, 0.1)',
                                borderRadius: '50%',
                                transform: 'translate(-50%, -50%) scale(0)',
                                transition: 'transform 0.5s ease'
                              },
                              '&:hover': {
                                transform: 'translateY(-2px)',
                                boxShadow: '0 5px 15px rgba(255, 255, 255, 0.2)',
                                '&::before': {
                                  transform: 'translate(-50%, -50%) scale(2)'
                                }
                              },
                              '&:active': {
                                transform: 'translateY(1px)'
                              }
                            }}
                          >
                            查看详情
                          </Button>
                        </Box>
                        <Box className="card-decoration" sx={{ 
                          position: 'relative',
                          display: 'flex',
                          justifyContent: 'flex-end',
                          zIndex: 1
                        }}>
                          <MdPeople className="icon-bg" style={{
                            fontSize: '200px',
                            color: 'rgba(255, 255, 255, 0.1)',
                            position: 'absolute',
                            right: '-20px',
                            top: '50%',
                            transform: 'translateY(-50%) rotate(-5deg)',
                            transition: 'all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
                          }} />
                        </Box>
                      </CardContent>
                    </Card>
                  </Box>

                  {/* 待办事项占满剩余中间宽度 - 与考勤日历上边对齐 */}
                  <Card sx={{ 
                    borderRadius: 2,
                    background: 'linear-gradient(to bottom, #f0f7ff, #e6f7ff)',
                    boxShadow: '0 8px 16px rgba(24,144,255,0.15)',
                    border: '1px solid rgba(24,144,255,0.2)',
                    flexGrow: 1
                  }}>
                    <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                        <Typography variant="h6" sx={{ fontWeight: 'bold', color: '#1a237e' }}>
                          我的待办事项
                        </Typography>
                        <Button 
                          variant="contained" 
                          color="primary" 
                          onClick={handleOpenCreateModal}
                          sx={{ 
                            background: '#60a5fa', 
                            '&:hover': { background: '#3b82f6' } 
                          }}
                        >
                          新增待办
                        </Button>
                      </Box>
                      <Box sx={{ 
                        display: 'flex', 
                        flexDirection: 'column',
                        height: '100%',
                        minHeight: '400px' // 确保有足够的高度
                      }}>
                        {!todoLoading ? (
                          <>
                            {todoItems.length > 0 ? (
                              <Box sx={{ 
                                display: 'flex', 
                                flexDirection: 'column', 
                                gap: '12px',
                                flexGrow: 1
                              }}>
                                {getCurrentPageTodos().map((todo) => (
                                  <Paper 
                                    key={todo.id} 
                                    elevation={1} 
                                    sx={{ 
                                      padding: '12px', 
                                      borderRadius: '8px',
                                      borderLeft: `4px solid ${isOverdue(todo.endTime) && todo.status === 0 ? '#f5222d' : '#1890ff'}`,
                                      opacity: todo.status === 1 ? 0.7 : 1,
                                      background: todo.status === 1 ? '#f5f5f5' : 'white'
                                    }}
                                  >
                                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                                      <Box>
                                        <Typography 
                                          variant="body1" 
                                          sx={{ 
                                            fontWeight: 'medium',
                                            textDecoration: todo.status === 1 ? 'line-through' : 'none',
                                            color: todo.status === 1 ? '#8c8c8c' : 'inherit'
                                          }}
                                        >
                                          {todo.matterContent}
                                        </Typography>
                                        <Typography variant="caption" sx={{ color: '#8c8c8c' }}>
                                          {formatDate(todo.startTime)} - {formatDate(todo.endTime)}
                                          {isOverdue(todo.endTime) && todo.status === 0 && (
                                            <span style={{ color: '#f5222d', marginLeft: '8px' }}>已逾期</span>
                                          )}
                                          {todo.status === 1 && (
                                            <span style={{ color: '#52c41a', marginLeft: '8px' }}>已完成</span>
                                          )}
                                          {/* 显示待办事项所属人 */}
                                          {todo.employeeId !== userInfo?.employeeId && (
                                            <Typography variant="caption" sx={{ color: '#8c8c8c', display: 'block' }}>
                                              所属人: {todo.employeeId}
                                            </Typography>
                                          )}
                                        </Typography>
                                      </Box>
                                      <Box sx={{ display: 'flex', gap: '8px' }}>
                                        {todo.status === 0 && (
                                          <>
                                            {/* 只有创建者可以编辑待办事项 */}
                                            {todo.creatorId === userInfo?.employeeId && (
                                              <Button 
                                                size="small" 
                                                variant="outlined"
                                                onClick={() => handleEditTodo(todo)}
                                                sx={{ minWidth: '60px', borderColor: '#1890ff', color: '#1890ff' }}
                                              >
                                                编辑
                                              </Button>
                                            )}
                                            <Button 
                                              size="small" 
                                              variant="contained"
                                              onClick={() => handleCompleteTodo(todo.id)}
                                              sx={{ minWidth: '60px', background: '#52c41a', '&:hover': { background: '#389e0d' } }}
                                            >
                                              完成
                                            </Button>
                                          </>
                                        )}
                                      </Box>
                                    </Box>
                                  </Paper>
                                ))}
                              </Box>
                            ) : (
                              <Box sx={{ 
                                display: 'flex', 
                                justifyContent: 'center', 
                                alignItems: 'center',
                                flexGrow: 1
                              }}>
                                <Typography variant="body1" color="textSecondary">
                                  暂无待办事项
                                </Typography>
                              </Box>
                            )}
                            
                            {/* 分页控件 - 固定在底部 */}
                            <Card sx={{ 
                              marginTop: 'auto', 
                              padding: '12px',
                              boxShadow: 'none',
                              borderTop: '1px solid #f0f0f0'
                            }}>
                              <Box sx={{ 
                                display: 'flex', 
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                width: '100%'
                              }}>
                                {/* 左侧显示总记录数和总页数 */}
                                <Typography variant="body2" color="textSecondary">
                                  共 {todoItems.length} 条记录，共 {Math.ceil(todoItems.length / pageSize)} 页
                                </Typography>
                                
                                {/* 中间显示分页按钮 */}
                                <div className="pagination">
                                  {/* 上一页按钮 */}
                                  <button
                                    className={`pagination-item pagination-nav ${currentPage === 1 ? 'disabled' : ''}`}
                                    onClick={handlePrevPage}
                                    disabled={currentPage === 1}
                                  >
                                    &lt;
                                  </button>
                                  
                                  {/* 页码按钮 */}
                                  {getPageRange().map((pageNum) => (
                                    <button
                                      key={pageNum}
                                      className={`pagination-item ${currentPage === pageNum ? 'active' : ''}`}
                                      onClick={() => handlePageChange(pageNum)}
                                    >
                                      {pageNum}
                                    </button>
                                  ))}
                                  
                                  {/* 下一页按钮 */}
                                  <button
                                    className={`pagination-item pagination-nav ${currentPage === Math.ceil(todoItems.length / pageSize) ? 'disabled' : ''}`}
                                    onClick={handleNextPage}
                                    disabled={currentPage === Math.ceil(todoItems.length / pageSize)}
                                  >
                                    &gt;
                                  </button>
                                </div>
                                
                                {/* 右侧显示跳转功能 */}
                                <div className="pagination-goto">
                                  跳至
                                  <input
                                    type="number"
                                    min="1"
                                    max={Math.ceil(todoItems.length / pageSize)}
                                    value={currentPage}
                                    onChange={(e) => {
                                      const value = parseInt(e.target.value);
                                      if (!isNaN(value) && value >= 1 && value <= Math.ceil(todoItems.length / pageSize)) {
                                        setCurrentPage(value);
                                      }
                                    }}
                                  />
                                  页
                                </div>
                              </Box>
                            </Card>
                          </>
                        ) : (
                          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexGrow: 1 }}>
                            <CircularProgress size={24} sx={{ color: '#1890ff' }} />
                            <Typography variant="body2" sx={{ ml: 1 }}>
                              加载中...
                            </Typography>
                          </Box>
                        )}
                      </Box>
                    </CardContent>
                  </Card>
                </Box>
              </Grid>

              {/* 右侧栏 */}
              <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', flexDirection: 'column' }}>
                {/* 个人信息概览 - 恢复原样式 */}
                <Card sx={{ 
                  mb: 2, 
                  borderRadius: 2,
                  background: 'linear-gradient(to bottom, #f0f5ff, #e6f7ff)',
                  boxShadow: '0 8px 16px rgba(47,84,235,0.15)',
                  border: '1px solid rgba(47,84,235,0.2)'
                }}>
                  <CardContent>
                    <Typography variant="h6" gutterBottom sx={{ 
                      display: 'flex', 
                      alignItems: 'center',
                      color: '#1890ff'
                    }}>
                      <PersonIcon sx={{ mr: 1, color: '#1890ff' }} />
                      教师信息概览
                    </Typography>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                      <SchoolIcon sx={{ mr: 1, color: '#597ef7' }} /> 
                      <Typography>
                        {userInfo?.deptType === 2 ? '院系' : '部门'}：{userInfo?.deptName || '未知'}
                      </Typography>
                    </Box>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                      <SchoolIcon sx={{ mr: 1, color: '#597ef7' }} /> 
                      <Typography>部门类型：{userInfo ? DEPT_TYPE_MAP[userInfo.deptType] : '未知'}</Typography>
                    </Box>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                      <GroupIcon sx={{ mr: 1, color: '#597ef7' }} /> 
                      <Typography>职称：{userInfo?.position || '未知'}</Typography>
                    </Box>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                      <EventIcon sx={{ mr: 1, color: '#597ef7' }} /> 
                      <Typography>工号：{userInfo?.employeeId || '未知'}</Typography>
                    </Box>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                      <EventIcon sx={{ mr: 1, color: '#597ef7' }} /> 
                      <Typography>角色：{userInfo?.role || '未知'}</Typography>
                    </Box>
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                      <EventIcon sx={{ mr: 1, color: '#597ef7' }} /> 
                      <Typography>状态：{userInfo ? STATUS_MAP[userInfo.status] : '未知'}</Typography>
                    </Box>
                  </CardContent>
                </Card>

                {/* 右侧：部门公告 - 占满垂直高度 */}
                <Card sx={{ 
                  borderRadius: 2, 
                  flexGrow: 1,
                  background: 'linear-gradient(to bottom, #f0f7ff, #e6f7ff)',
                  boxShadow: '0 8px 16px rgba(24,144,255,0.15)',
                  border: '1px solid rgba(24,144,255,0.2)'
                }}>
                  <CardContent sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                    <Typography variant="h6" gutterBottom sx={{ 
                      display: 'flex', 
                      alignItems: 'center',
                      color: '#1890ff'
                    }}>
                    <InfoIcon sx={{ mr: 1, color: '#1890ff' }} />
                      部门公告
                    </Typography>
                    <List sx={{ flexGrow: 1, overflow: 'auto' }}>
                      {announcements.length > 0 ? (
                        announcements.map((announcement: any) => (
                          <ListItem key={announcement.id}>
                            <ListItemText
                              primary={
                                <Typography sx={{ color: '#1890ff', fontWeight: 500 }}>
                                  {announcement.title}
                                </Typography>
                              }
                              secondary={
                                <React.Fragment>
                                  <Typography component="span" variant="body2">
                                    {announcement.content}
                                  </Typography>
                                  <br />
                                  <Typography component="span" variant="body2" color="text.secondary">
                                    发布时间: {formatDate(announcement.publishTime)}
                                  </Typography>
                                </React.Fragment>
                              }
                            />
                          </ListItem>
                        ))
                      ) : (
                        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
                          <Typography variant="body2" color="text.secondary">
                            暂无部门公告
                          </Typography>
                        </Box>
                      )}
                    </List>
                  </CardContent>
                </Card>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
      </Container>

      {/* 编辑待办事项模态框 */}
      <Modal
        title="编辑待办事项"
        open={editModalVisible}
        onOk={handleEditSubmit}
        onCancel={() => setEditModalVisible(false)}
        okText="保存"
        cancelText="取消"
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            name="matterContent"
            label="待办内容"
            rules={[{ required: true, message: '请输入待办内容' }]}
          >
            <Input.TextArea rows={4} placeholder="请输入待办内容" />
          </Form.Item>
          <Form.Item
            name="dateRange"
            label="起止时间"
            rules={[{ required: true, message: '请选择起止时间' }]}
          >
            <DatePicker.RangePicker 
              showTime 
              style={{ width: '100%' }}
              format="YYYY-MM-DD HH:mm:ss"
            />
          </Form.Item>
        </Form>
      </Modal>

      {/* 创建待办事项模态框 */}
      <Modal
        title="新增待办事项"
        open={createModalVisible}
        onCancel={handleCloseCreateModal}
        destroyOnClose={true}
        afterClose={() => {
          // 模态框完全关闭后再次重置表单
          createForm.resetFields();
        }}
        footer={[
          <Button 
            key="cancel" 
            onClick={handleCloseCreateModal}
            sx={{ color: '#6b7280' }}
          >
            取消
          </Button>,
          <Button 
            key="submit" 
            variant="contained" 
            onClick={handleCreateSubmit}
            sx={{ 
              background: '#60a5fa', 
              color: 'white',
              '&:hover': { background: '#3b82f6' } 
            }}
          >
            创建
          </Button>
        ]}
      >
        <Form
          form={createForm}
          layout="vertical"
          name="createTodoForm"
          preserve={false}
          initialValues={{
            assignType: 'self'
          }}
        >
          <Form.Item
            name="assignType"
            label="添加对象"
          >
            <Radio.Group onChange={(e) => {
              // 当选择变化时，更新表单状态
              const isOther = e.target.value === 'other';
              setIsAddingForOther(isOther);
              
              // 如果选择"给自己添加"，清空员工号字段
              if (!isOther) {
                createForm.setFieldsValue({ employeeId: '' });
              }
            }}>
              <Radio value="self">给自己添加</Radio>
              <Radio value="other">给员工添加</Radio>
            </Radio.Group>
          </Form.Item>
          
          <Form.Item
            name="employeeId"
            label="员工号"
            rules={[
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (getFieldValue('assignType') === 'other' && !value) {
                    return Promise.reject(new Error('请输入员工号'));
                  }
                  return Promise.resolve();
                },
              }),
            ]}
            dependencies={['assignType']}
            style={{ display: isAddingForOther ? 'block' : 'none' }}
          >
            <Input 
              placeholder="请输入员工号" 
              disabled={!isAddingForOther}
            />
          </Form.Item>
          
          <Form.Item
            name="matterContent"
            label="待办内容"
            rules={[{ required: true, message: '请输入待办内容' }]}
          >
            <Input.TextArea rows={4} placeholder="请输入待办内容" />
          </Form.Item>
          <Form.Item
            name="dateRange"
            label="起止时间"
            rules={[{ required: true, message: '请选择起止时间' }]}
          >
            <DatePicker.RangePicker 
              showTime 
              style={{ width: '100%' }} 
              placeholder={['开始时间', '结束时间']}
              format="YYYY-MM-DD HH:mm:ss"
              allowClear={true}
            />
          </Form.Item>
        </Form>
      </Modal>

      <style jsx>{`
        .dashboard-container {
          padding: 24px;
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 24px;
        }

        .recruitment-card {
          cursor: pointer;
          overflow: hidden;
          position: relative;
          background: linear-gradient(45deg, #000428 0%, #004e92 100%) !important;
          min-height: 180px;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        .recruitment-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 20px 40px rgba(0, 4, 40, 0.4) !important;
        }

        .card-content {
          position: relative;
          padding: 40px;
          height: 100%;
          display: flex;
          justify-content: space-between;
          alignItems: center;
        }

        .card-text {
          position: relative;
          z-index: 2;
        }

        .card-title {
          font-size: 3.5em !important;
          font-weight: 900 !important;
          color: white;
          text-transform: uppercase;
          margin-bottom: 8px;
          font-family: 'Impact', sans-serif !important;
          letterSpacing: 2px;
          text-shadow: 4px 4px 0px rgba(0, 78, 146, 0.5);
        }

        .card-subtitle {
          font-size: 1.2em !important;
          color: #60a5fa;
          font-weight: 600 !important;
          letterSpacing: 4px;
          font-family: 'Segoe UI', sans-serif !important;
        }

        .card-decoration {
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          alignItems: flex-end;
          gap: 20px;
        }

        .icon-bg {
          font-size: 180px;
          color: rgba(96, 165, 250, 0.1);
          position: absolute;
          right: -40px;
          top: 50%;
          transform: translateY(-50%) rotate(-5deg);
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .recruitment-card:hover .icon-bg {
          animation: float 3s ease-in-out infinite;
          color: rgba(255, 255, 255, 0.15);
        }

        .view-button {
          background: #60a5fa !important;
          color: white !important;
          padding: 12px 36px !important;
          font-size: 1.2em !important;
          font-weight: 600 !important;
          border-radius: 50px !important;
          display: flex !important;
          gap: 12px !important;
          align-items: center !important;
          text-transform: none !important;
          transition: all 0.3s ease !important;
          border: 2px solid transparent !important;
          z-index: 2;
        }

        .view-button:hover {
          background: transparent !important;
          border-color: #60a5fa !important;
          transform: translateX(10px);
        }

        @media (max-width: 768px) {
          .card-content {
            padding: 24px;
            flex-direction: column;
            text-align: center;
            gap: 30px;
          }

          .card-title {
            font-size: 2.5em !important;
          }

          .card-decoration {
            align-items: center;
          }

          .icon-bg {
            right: 50%;
            transform: translate(50%, -50%);
            font-size: 150px;
          }

          .recruitment-card:hover .icon-bg {
            animation: none;
            transform: translate(50%, -50%) scale(1.1);
          }
        }

        .pagination {
          display: flex;
          justify-content: center;
          gap: 8px;
          margin-top: 16px;
        }

        .pagination-item {
          width: 32px;
          height: 32px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border: 1px solid #d9d9d9;
          background: white;
          transition: all 0.3s;
        }

        .pagination-item:hover {
          border-color: #1890ff;
          color: #1890ff;
        }

        .pagination-item.active {
          background: #1890ff;
          color: white;
          border-color: #1890ff;
        }

        .pagination-nav {
          font-weight: bold;
        }

        .pagination-nav.disabled {
          color: #d9d9d9;
          cursor: not-allowed;
          border-color: #d9d9d9;
        }

        .pagination-nav.disabled:hover {
          color: #d9d9d9;
          border-color: #d9d9d9;
        }

        .pagination-goto {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #666;
          margin-left: 8px;
        }

        .pagination-goto input {
          width: 40px;
          height: 32px;
          margin: 0 8px;
          text-align: center;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          outline: none;
        }

        .pagination-goto input:focus {
          border-color: #1890ff;
        }

        @keyframes float {
          0% {
            transform: translateY(-50%) rotate(-5deg);
          }
          50% {
            transform: translateY(-55%) rotate(0deg);
          }
          100% {
            transform: translateY(-50%) rotate(-5deg);
          }
        }
      `}</style>
    </AppLayout>
  );
};

export default DashboardPage;